<script setup>
import { ref, reactive } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';
import { forget, loginOut } from '@/api/login';
import Cookies from 'js-cookie';
const router = useRouter()
const pwd = ref('')
const newpwd = ref('')
const rpwd = ref('')
// 提交
const confirm = () => {
    if (!pwd.value || !newpwd.value || !rpwd.value) {
        showFailToast('请输入完整信息')
        return
    }
    if (newpwd.value.length < 6 || rpwd.value.length < 6) {
        showFailToast('新密码必须6位以上')
        return
    }
    if (newpwd.value !== rpwd.value) {
        showFailToast('重复密码与新密码不一致')
        return
    }
    forget({
        password: pwd.value,
        newpassword: newpwd.value
    }).then(res => {
        if (res.status === 200) {
            showSuccessToast('密码修改成功，请重新登录')
            loginOut()
                .catch(() => { }) // 忽略 logout 失败，确保无论如何都退出
                .finally(() => {
                    Cookies.remove('Token');
                    sessionStorage.clear();
                    router.push('/login');
                });
        } else {
            showFailToast(res.msg);
        }
    })
}
// 逻辑代码
</script>

<template>
    <div class="wrapper">
        <van-field v-model="pwd" type="password" label="原始密码：" placeholder="请输入" />
        <van-field v-model="newpwd" type="password" label="新密码" placeholder="请输入" />
        <van-field v-model="rpwd" type="password" label="重复密码" placeholder="请输入" />
        <van-button block class="btn" color="#fe5e48" @click="confirm()">确定</van-button>
    </div>
</template>

<style scoped>
.btn {
    width: calc(100% - 30px);
    margin: 20px auto;
    border-radius: 12px;
}

.wrapper {
    margin-top: 15px;
}
</style>